<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../common/common-head.jsp"%>

<script charset="utf-8" src="${cdnServer}kindeditor-4.1.11-zh-CN/kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="${cdnServer}kindeditor-4.1.11-zh-CN/kindeditor/lang/zh-CN.js"></script>

<script>
    KindEditor.ready(function(K) {
        window.editor = K.create('#goodsDetails',{
            uploadJson : '${basePath}/goods/UploadJson',
            fileManagerJson : '${basePath}/goods/FileManagerJson',
            allowFileManager : true
        });
    });
</script>

<body>

<!-- begin #page-container -->


    <!-- begin #content -->
    <div id="content" class="content">

        <%@include file="../common/common-breadcrumb-add.jsp" %>

        <!-- begin row -->
        <div class="row">
            <!-- begin col-6 -->
            <div class="col-xl-12">
                <!-- begin panel -->
                <div class="panel panel-inverse" data-sortable-id="form-stuff-1">
                    <!-- begin panel-heading -->
                    <div class="panel-heading">
                        <h4 class="panel-title" >${editObj!=null?'编辑商品':'新增商品'}</h4>
                        <div class="panel-heading-btn">
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand"><i class="fa fa-expand"></i></a>
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload"><i class="fa fa-redo"></i></a>
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>
                            <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>
                        </div>
                    </div>
                    <!-- end panel-heading -->
                    <!-- begin panel-body -->
                    <div class="panel-body">
                        <form>
                            <input type="hidden" value="${editObj!=null?editObj.id:''}" id="id">
                            <div class="form-group row m-b-15">
                                <label class="col-form-label col-md-3">商品名称</label>
                                <div class="col-md-9">
                                    <input type="email" class="form-control m-b-5" placeholder="商品名称" name="name" id="name"
                                           value="${editObj!=null?editObj.name:''}" />
                                    <small class="f-s-12 text-grey-darker" style="display: none">商品名称.</small>
                                </div>
                            </div>
                            <div class="form-group row m-b-15">
                                <label class="col-form-label col-md-3">商品价格</label>
                                <div class="col-md-9">
                                    <input type="email" class="form-control m-b-5" placeholder="商品价格" name="price" id="price"
                                           value="${editObj!=null?editObj.price:''}" />
                                    <small class="f-s-12 text-grey-darker" style="display: none">商品价格.</small>
                                </div>
                            </div>
                            <div class="form-group row m-b-15">
                                <label class="col-form-label col-md-3">库存</label>
                                <div class="col-md-9">
                                    <input type="email" class="form-control m-b-5" placeholder="库存" name="stock" id="stock"
                                           value="${editObj!=null?editObj.stock:''}" />
                                    <small class="f-s-12 text-grey-darker" style="display: none">库存.</small>
                                </div>
                            </div>

                            <div class="form-group row m-b-15">
                                <label class="col-form-label col-md-3">商品图片</label>
                                <div class="col-md-9">
                                    <input type="file" name="file" id="file1" style="display: none" onchange="uploadFile(1)">
                                    <input type="file" name="file" id="file2" style="display: none" onchange="uploadFile(2)">
                                    <input type="file" name="file" id="file3" style="display: none" onchange="uploadFile(3)">
                                    <input type="file" name="file" id="file4" style="display: none" onchange="uploadFile(4)">

                                    <input type="hidden" name="photo" id="photo">

                                    <%-- 新增 --%>
                                    <c:if test="${editObj==null || editObj.photos==null || editObj.photos.size()==0}">
                                        <img src="${cdnServer}dushibao/images/goods.png" width="80px" id="goodsPhoto1" onclick="openPhoto(1)">
                                        <img src="${cdnServer}dushibao/images/goods.png" width="80px" id="goodsPhoto2" onclick="openPhoto(2)">
                                        <img src="${cdnServer}dushibao/images/goods.png" width="80px" id="goodsPhoto3" onclick="openPhoto(3)">
                                        <img src="${cdnServer}dushibao/images/goods.png" width="80px" id="goodsPhoto4" onclick="openPhoto(4)">
                                    </c:if>
                                    <c:if test="${editObj!=null}">
                                        <%-- 商品有主图 --%>
                                        <c:if test="${editObj.photos!=null && editObj.photos.size()!=0}">
                                            <c:forEach items="${editObj.photos}" var="photo" varStatus="status">
                                                <img src="${cdnServer}${photo.path}" width="80px" id="goodsPhoto${status.count}" onclick="openPhoto(${status.count})">
                                            </c:forEach>
                                        </c:if>

                                    </c:if>

                                </div>
                            </div>

                            <div class="form-group row m-b-15">
                                <label class="col-form-label col-md-3">商品详情</label>
                                <div class="col-md-9">
                                    <textarea id="goodsDetails" name="goodsDetails" style="width:400px;height:300px;">
                                        ${editObj.details}
                                    </textarea>
                                    <small class="f-s-12 text-grey-darker" style="display: none">商品详情.</small>
                                </div>
                            </div>

                            <div class="form-group row">
                                <div class="col-md-7 offset-md-3">
                                    <button type="button" class="btn btn-sm btn-primary m-r-5" id="saveObj">保存</button>
                                    <button type="button" class="btn btn-sm btn-default" onclick="back()">返回</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- end panel-body -->

                </div>
                <!-- end panel -->

            </div>
            <!-- end col-6 -->
        </div>
        <!-- end row -->

    </div>
    <!-- end #content -->

<%@include file="../common/common-script.jsp"%>

<script>
    var ctx = '${basePath}'

    function back(){
        window.location.href=ctx+"goods/list"
    }

    $(function(){

        $("#saveObj").click(function(){
            var data = {}
            data['id'] = $("#id").val()
            data['addTime'] = $("#addTime").val()
            data['name'] = $("#name").val()
            data['price'] = $("#price").val()
            data['stock'] = $("#stock").val()
            data['details'] = editor.html()
            data['goodsPhotos'] = $("#photo").val()

            $.ajax({
                type:'post',
                url:ctx+'goods/add',
                data:JSON.stringify(data),
                success:function(res){
                    if(res == "1000"){
                        window.location.href=ctx+"goods/list"
                    }
                }
            })

        })
    })

    var cdnServer = '${cdnServer}'

    function openPhoto(index){
        $("#file"+index).trigger("click")
    }

    function uploadFile(index){
        var formData=new FormData();
        formData.append("file",$('#file'+index).prop('files')[0]);
        $.ajax({
            type:'POST',
            url:'/goods/AjaxUploadServlet',
            data:formData,
            contentType: false,// 注意：让jQuery不要处理数据
            processData: false,// 注意：让jQuery不要设置contentType
            dataType:'json',
            success:function (res) {
                $("#goodsPhoto"+index).attr("src",cdnServer+res.path)
                var photo = $("#photo").val()
                $("#photo").val(res.id + ',' + photo)
            }
        });
    }

</script>

</body>
</html>
